<template>
	<div>
		<el-form
			size="large"
			class="login-content-form px-[33px]"
			ref="loginFormRef"
			:rules="loginRules"
			:model="state.ruleForm"
			@keyup.enter="onSignIn"
		>
			<el-form-item class="login-animation1 !mb-0" prop="username">
				<el-input
					text
					:placeholder="$t('password.accountPlaceholder1')"
					v-model="state.ruleForm.username"
					clearable
					autocomplete="off"
				>
					<template #prefix>
						<el-icon class="el-input__icon" :size="24">
							<ele-User />
						</el-icon>
					</template>
				</el-input>
			</el-form-item>
			<div class="h-9 pt-1">
				<div
					v-show="showSetPass"
					class="login-animation2 text-[#ffffff80] text-base flex items-center leading-none"
				>
					当前账号未设置登录密码，点击
					<span
						class="set-pass-btn ml-1 text-[#55B8FF] cursor-pointer"
						@click="openSetPass"
					>
						设置登录密码
					</span>
				</div>
			</div>
			<el-form-item class="login-animation2 !mb-0" prop="password">
				<el-input
					:type="state.isShowPassword ? 'text' : 'password'"
					:placeholder="$t('password.accountPlaceholder2')"
					v-model="state.ruleForm.password"
					autocomplete="off"
				>
					<template #prefix>
						<el-icon class="el-input__icon" :size="24">
							<ele-Unlock />
						</el-icon>
					</template>
					<template #suffix>
						<i
							class="iconfont el-input__icon login-content-password"
							:class="
								state.isShowPassword ? 'icon-yincangmima' : 'icon-xianshimima'
							"
							@click="state.isShowPassword = !state.isShowPassword"
						></i>
					</template>
				</el-input>
			</el-form-item>
			<div class="h-9"></div>
			<el-form-item class="login-animation2" prop="code" v-if="verifyEnable">
				<el-col :span="15">
					<el-input
						text
						maxlength="4"
						:placeholder="$t('mobile.placeholder2')"
						v-model="state.ruleForm.code"
						clearable
						autocomplete="off"
					>
						<template #prefix>
							<el-icon class="el-input__icon" :size="24">
								<ele-Position />
							</el-icon>
						</template>
					</el-input>
				</el-col>
				<el-col :span="1"></el-col>
				<el-col :span="8">
					<img :src="imgSrc" @click="getVerifyCode" />
				</el-col>
			</el-form-item>
			<el-button
				type="primary"
				class="login-content-submit mt-10"
				:loading="loading"
				@click="onSignIn"
			>
				<span>{{ $t('password.accountBtnText') }}</span>
			</el-button>
		</el-form>
		<!-- <SetPassword ref="SetPasswordRef" @success="accountBlur" /> -->
	</div>
</template>

<script setup lang="ts" name="password">
import { reactive, ref } from 'vue';
import { useUserInfo } from '/@/stores/userInfo';
import { useI18n } from 'vue-i18n';
import { generateUUID } from '/@/utils/other';
// import { checkPasswordEmpty } from '/@/api/admin/user';

// 使用国际化插件
const { t } = useI18n();

// 定义变量内容
const emit = defineEmits(['signInSuccess']); // 声明事件名称
const loginFormRef = ref(); // 定义LoginForm表单引用
const loading = ref(false); // 定义是否正在登录中
const state = reactive({
	isShowPassword: false, // 是否显示密码
	ruleForm: {
		// 表单数据
		username: '', // 用户名
		password: '', // 密码
		code: '', // 验证码
		randomStr: '', // 验证码随机数
	},
});

const loginRules = reactive({
	username: [
		{
			required: true,
			trigger: 'blur',
			message: t('password.accountPlaceholder1'),
		},
	], // 用户名校验规则
	password: [
		{
			required: true,
			trigger: 'blur',
			message: t('password.accountPlaceholder2'),
		},
	], // 密码校验规则
});

// 显示设置密码
const showSetPass = ref(false);
const SetPasswordRef = shallowRef();
function openSetPass() {
	SetPasswordRef.value.open(state.ruleForm.username);
}

// 是否开启验证码
const verifyEnable = ref(import.meta.env.VITE_VERIFY_ENABLE === 'true');
const imgSrc = ref('');

//获取验证码图片
const getVerifyCode = () => {
	state.ruleForm.randomStr = generateUUID();
	imgSrc.value = `${import.meta.env.VITE_API_URL}${import.meta.env.VITE_IS_MICRO == 'false' ? '/platform' : ''}/code/image?randomStr=${state.ruleForm.randomStr}`;
};

// 账号密码登录
const onSignIn = async () => {
	const valid = await loginFormRef.value.validate().catch(() => {}); // 表单校验
	if (!valid) return false;

	loading.value = true; // 正在登录中
	try {
		await useUserInfo().login(state.ruleForm); // 调用登录方法
		emit('signInSuccess'); // 触发事件
	} finally {
		getVerifyCode();
		loading.value = false; // 登录结束
	}
};

onMounted(() => {
	getVerifyCode();
});
</script>

<style scoped lang="scss">
.login-content-form {
	:deep(.el-input__wrapper) {
		height: 50px;
		background: rgba(255, 255, 255, 0.05);
		border-radius: 4px;
		--el-input-border-color: var(--el-color-primary);

		.el-input__inner {
			color: var(--el-color-white);
		}
	}
}

.set-pass-btn {
	text-decoration: underline;
}

:deep(.el-overlay .el-overlay-dialog) {
	justify-content: flex-end;
	padding-right: 126px;
}
</style>
